<template>
	<view class="search">
		<view class="searchfrom">
			<input
				class="search-input"
				v-model="searchKey"
				:focus="myFocus"
				@focus="onFocus"
				@blur="onBlur"
				confirm-type="search"
				@confirm="search"
				name="search"
				type="text"
				id="textfield"
				placeholder="找工作、找房子、找点事"
			/>
			<button class="search-button" @click="search()">搜索</button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Search',
	data() {
		return {
			searchKey: '',
			myFocus: false
		};
	},
	props: {
		autoFocus: {
			type: Boolean
			// default:false
		}
	},
	methods: {
		onFocus() {
			this.$mp.page.$getAppWebview().setStyle({
				softinputNavBar: 'none'
			});
		},
		onBlur() {
			this.$mp.page.$getAppWebview().setStyle({
				softinputNavBar: 'auto'
			});
		},
		search() {
			if (this.searchKey) {
				console.log(this.searchKey);
				this.$emit('search', this.searchKey);
			}
		}
	},
	watch: {
		autoFocus: function(newVal, oldVal) {
			this.myFocus = newVal;
			console.log(this.myFocus);
		}
	}
};
</script>

<style scoped>
.search {
	display: flex;
	padding-top: 16rpx;
	z-index: 9;
	background-size: 30rpx;
	color: #898989;
	height: 94rpx;
	background-color: #c8000a;
	flex-direction: row;
}
.searchfrom {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 94%;
	height: 67rpx;
	background-color: #fff;
	margin-left: 24rpx;
	margin-right: 24rpx;
	border-radius: 40rpx;
	padding: 5rpx 0 5rpx 0;
}

.search-input {
	width: 76%;
	background: #fff;
	line-height: 66rpx;
	height: 66rpx;
	font-size: 28rpx;
	text-indent: 10rpx;
	border: 0px #898989 solid;
	margin-left: 25rpx;
	float: left;
	padding-left: 0px;
	padding-right: 0px;
}
.search-button {
	display: flex;
	height: 66rpx;
	line-height: 69rpx;
	color: #c8000a;
	background-color: #fff;
	margin-right: 25rpx;
	border-radius: 0px;
	font-size: 32rpx;
}
.search-button::after {
	border: none;
}
</style>
